<template>
	<cl-popup
		v-model="visible"
		direction="bottom"
		backgroundColor="#f5f5f5"
		borderRadius="16rpx 16rpx 0 0"
		:padding="0"
	>
		<view class="title-wrap">
			<block v-if="utilStr == '体积'">
				<text>已选荒料{{ listData.length }}</text>
				<text class="ml-36">总体积{{ getTotalArea(listData, "blockVolume") }}m³</text>
			</block>
			<block v-else>
				<text>已选{{ getTotalPieceNum(listData) }}片</text>
				<text class="ml-36">总面积{{ getTotalArea(listData, "_selTotalArea") }}m²</text>
			</block>
		</view>

		<!-- @scrolltolower="getList" -->
		<scroll-view class="scroll-wrap" :scroll-x="false" :scroll-y="true" scroll-with-animation>
			<stone-list padding="0 30rpx 30rpx 30rpx" :list="listData" :isShowNorm="utilStr == '体积'">
				<template v-slot:listPrepend="data">
					<view class="list-text text-sub mt-6">
						<text class="list-text_label label-text" style="letter-spacing: 26rpx">{{
							utilStr == '体积' ? '体积' : '已选'
						}}</text>
						<text v-if="utilStr == '体积' " class="list-text_value ml-20">{{ data.item.blockVolume }}m³</text>
						<text v-else class="list-text_value ml-20">{{ data.item._pieceNum }}片({{ data.item._selTotalArea }}m²)</text>
					</view>
				</template>
				<template v-slot:icon="data">
					<view class="icon-wrap">
						<view class="icon-wrap_list" @tap.stop="onDel(data.item)">
							<cl-icon
								:className="`iconfont icon-shanchu`"
								color="#666"
								:size="40"
							></cl-icon>
						</view>
						<view
							class="icon-wrap_list"
							v-if="isModify"
							@tap.stop="onModify(data.item)"
						>
							<cl-icon
								:className="`iconfont icon-icon-edit`"
								color="#666"
								:size="40"
							></cl-icon>
						</view>
					</view>
				</template>
			</stone-list>
		</scroll-view>
	</cl-popup>
</template>

<script lang="ts" setup>
import { ref, defineComponent, computed, PropType } from "vue";
import StoneList from "../stone-list/stone-list.vue";

import { getTotalPieceNum, getTotalArea } from "/@/utils";
import { useCool, useStore } from "/@/cool";

const { brand } = useStore();
const { router, service, ui, mitt } = useCool();

type list = {
	[key: string]: any;
}[];

const props = defineProps({
	list: {
		type: Array as PropType<list>,
		default: () => [],
	},
	utilStr: {
		type: String,
		default: "体积",
	},
	isModify: {
		type: Boolean,
		default: false,
	},
	selectKey: {
		type: [String, Number],
		default: "",
	},
	pageType: {
		type: String,
		default: "brand",
	},
});

const emit = defineEmits(["del", "modify"]);

const listData = ref<any[]>([]);
const visible = ref<boolean>(false);
function open() {
	console.info("props.list", props.list);
	listData.value = props.pageType == "stone" ? props.list : brand.selList;
	visible.value = true;
}

function close() {
	visible.value = false;
}

async function onDel(data: any) {
	await brand.delSelList(data._index);
	brand.update();
	emit("del", data);
}

function onModify(data: any) {
	brand.setSelObj(data);
	close();
	router.push(`/pages/out/select?type=${props.selectKey}`);
}

defineExpose({
	open,
});
</script>

<style lang="scss" scoped>
.title-wrap {
	font-size: 30rpx;
	font-weight: 600;
	margin-left: 30rpx;
	height: 108rpx;
	display: flex;
	align-items: center;
}
.scroll-wrap {
	width: 100%;
	height: 100%;
	max-height: 800rpx;
	background-color: #f5f5f5;
	box-sizing: border-box;
}

.icon-wrap {
	display: flex;
	align-items: center;
	&_list {
		padding: 20rpx 0 20rpx 50rpx;
		&:first-child {
			padding-left: 0;
		}
	}
}
</style>
